<template>
  <div v-loading="loading" class="padding grid-content height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="选择时间">
          <el-date-picker
            v-model="time" type="year" value-format="yyyy"
            :clearable="false" placeholder="选择年份"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex gap width-100">
      <grid-item-one :data="gridItemOneData" @industry-table-row-click="handlerIndustryTableRowClick"></grid-item-one>
      <grid-item-two v-bind="gridItemTwoData"></grid-item-two>
    </div>
    <grid-item-three v-if="gridItemThreeData" style="margin-top: 1rem;overflow: auto;" :data="gridItemThreeData"></grid-item-three>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import GridItemThree from './grid-item-three'

import MixinGridItemOne from './mixin-grid-item-one'
import MixinGridItemTwo from './mixin-grid-item-two'
import MixinGridItemThree from './mixin-grid-item-three'

export default {
  name: 'energy-efficiency-analysis-industry',
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree
  },
  mixins: [MixinGridItemOne, MixinGridItemTwo, MixinGridItemThree],
  data () {
    return {
      loading: false,
      time: new Date().getFullYear() + '',
      timeType: '1y',
      pickerOptions: {
        disabledDate(date) {
          return date > new Date();
        }
      }
    };
  },
  mounted () {
    this.getAllData();
  },
  methods: {
    getParams () {
      return {
        time: this.time,
        timeType: this.timeType,
      };
    },
    async getAllData () {
      this.loading = true;
      await this.getGridItemOneData();
      await this.getGridItemThreeData();
      this.loading = false;
    },
    clickSearch () {
      this.getAllData();
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: flex;
    flex-direction: column;

    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }

    .content-block {
      background: white;
      border-radius: 4px;
    }

    .block-1 {
      flex: 0 1 60%;
      overflow: auto;
    }
    .block-2 {
      flex: 1 1 40%;
    }
    .block-3 {
      flex: 1;
    }
  }
</style>
